| RecyclerView

• TODO LIST

• 聊天室界面

  • 

| 前言概念

• 實作出一個能夠呈現聊天室的介面，這邊著重在畫面的部分，後端的 socket 串接並沒有在文章內容唷！
  專案是以一個跟聊天機器人互動的樣式去做 demo，我方代表著使用者可以輸入訊息，然後聊天機器人那邊可以回傳訊息，但是目前只有畫面，沒有打算接入回傳的 api 唷。
  這篇先介紹使用的部分畫面如何形成的，下一篇將會介紹套用到 recyclerView 的串接過程！

| 實作概念

• 聊天室的聊天泡泡

  在處理畫面的聊天泡泡，其實還蠻麻煩的，主要要針對他的 background 去畫，並且要畫出 user 這邊的（泡泡尾巴向右）以及 bot 端的（泡泡尾巴向左）。
  整體的概念是這樣，泡泡尾巴可以先想成是一個三角形的某個部份，而這個三角形可以由正方形旋轉產生出來，接著再疊上一層圓角長方形。

  • 需要在 drawable 裡面新建一個 xml 檔案

    • 泡泡尾巴是一個正方形用轉的，轉了一點點角度之後只留上方的頭，如下
      

    • code

    <rotate
            android:fromDegrees="30"
            android:pivotX="50%"
            android:pivotY="0%"
            >
        <shape android:shape="rectangle" >
            <solid android:color="#000055" />
        </shape>
    </rotate>
    

  • 接著再用一個長方形把右邊的部分（padding left）蓋上，如下圖
    • 
    • code

    <item android:right="14dp">
        <shape android:shape="rectangle" >
            <solid android:color="#000055" />
            <corners android:radius="4dp" />
        </shape>
    </item>
    

  • 了解正方形的 rotate 裡面的參數
    • fromDegrees 跟 toDegrees
      • 
      • 在這專案因為只要旋轉，所以 toDegrees 沒有用到

• 點擊其他地方，收起 editText 的小鍵盤

  如果現在在打字，那麼下方會顯現出一個虛擬鍵盤，收起這個鍵盤都要按下返回鍵才會返回。為了增加使用者體驗，我希望達到點擊其他的空白處，他就會自動收起來了，該如何做呢？

  我在 fragment 的 layout 加入了 touchListener，當按下背景的時候就會觸發，而這邊的觸發處理比較簡單，如下

  viewRoom.chatRoom.setOnTouchListener { view, motionEvent ->
      when(motionEvent.action) {
          MotionEvent.ACTION_DOWN-> {
              viewRoom.texting.clearFocus()
              val imm = context?.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
              imm.hideSoftInputFromWindow(view!!.windowToken, 0)
              return@setOnTouchListener false
          }
      }
  }
  

  首先，我先清掉在 editText 上面的 focus，這邊有直接指定要清掉 texting 的這個 EditText，另外也可以使用 activity.getcurrentFocus() 來取（如果可能會不知道哪幾個會被 focus 的話建議使用這個），清除了之後，下面就是把 softInput （就是螢幕跳出來的小鍵盤）給隱藏起來，就搞定了。